<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b
                  style="font-family: '微软雅黑';color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">添加课程</b>
              </div>
            </el-col>
          </el-row>
          <div style="height: 300px; width: 600px;margin: 0 100px; border: 1px solid #eee">
            <el-form :model="courseForm" :rules="rules" ref="courseForm" style="margin: 10px auto;" label-width="100px"
                     class="demo-ruleForm">
              <el-form-item label="课程名称" prop="courseName">
                <el-input v-model="courseForm.courseName"></el-input>
              </el-form-item>
              <el-form-item label="课程学分" prop="credit">
                  <el-slider
                    v-model="courseForm.credit"
                    :max="max"
                    :min="min"
                    show-input>
                  </el-slider>
              </el-form-item>
              <el-form-item label="班级名称" prop="classroomName">
                <el-select clearable v-model="courseForm.classroomName" filterable placeholder="请选择班级(可搜索)">
                  <el-option
                    v-for="item in options"
                    :key="item.classroomName"
                    :label="item.classroomName"
                    :value="item.classroomName">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('courseForm')">立即创建</el-button>
                <el-button @click="resetForm('courseForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/teacherSide/left'
import Top from '@/components/teacherSide/top'

export default {
  name: 'teacherAddCourse',
  data () {
    return {
      teacherId: '',
      options: [{
        classroomName: ''
      }],
      max: 6,
      min: 2,
      loading: false,
      courseForm: {
        courseName: '',
        classroomName: '',
        credit: 4
      },
      rules: {
        courseName: [
          {required: true, message: '请输入课程名称', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ],
        classroomName: [
          {required: true, message: '请选择班级', trigger: 'blur'}
        ],
        credit: [
          {required: true, message: '请输入课程学分', trigger: 'blur'}
        ]
      }
    }
  },
  beforeMount () {
    this.getTeacherId()
  },
  mounted () {
    this.getAllClassroomNames()
  },
  watch: {
    credit: function () {
      this.changeCredit()
    }
  },
  methods: {
    // 监听学分数据的变化
    changeCredit () {
      if (this.courseForm.credit === 2) {
        this.$message({
          message: '警告哦，学分最小为 2 个学分',
          type: 'warning'
        })
      } else if (this.courseForm.credit === 6) {
        this.$message({
          message: '警告哦，学分最大为 6 个学分',
          type: 'warning'
        })
      }
    },
    // 获取教师id
    getTeacherId () {
      this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
    },
    // 获取当前老师的所有班级的班级名称
    getAllClassroomNames () {
      this.$axios.post('http://localhost:8888/getAllClassroomByTeacherId/' + this.teacherId).then(res => {
        this.options = res.data.data
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 提交表单，创建课程
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8888/teacherCreateCourse/' + this.teacherId, this.courseForm).then(res => {
            if (res.data.flag && res.data.data === 'success') {
              this.$message({
                message: '恭喜你，课程创建成功',
                type: 'success'
              })
              this.courseForm.courseName = ''
              this.courseForm.classroomName = ''
              this.courseForm.credit = 4
            } else if (res.data.flag === false && res.data.data === 'err') {
              this.$message({
                message: '警告哦，您已创建此课程，不能重复创建',
                type: 'warning'
              })
              this.courseForm.courseName = ''
            }
          }).catch(err => {
            this.$message.error('错了哦，数据错误，课程创建失败')
            return Promise.reject(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  components: {
    Left,
    Top
  }
}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }

  a {
    text-decoration: none;
    color: white;
  }
</style>
<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #cadcf5;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
